import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import routes from './routes';
import {Route, Switch} from 'react-router-dom';
import Breadcrumb from 'Shell/components/Breadcrumb';
import {Card} from 'antd';
import QueryPanel from './QueryPanel';
import TablePanel from './TablePanel';
import Detail from './DetailPanel';
import NewPanel from './NewPanel';
import ApprovePanel from './ApprovePanel';
import 'ant-design-pro/dist/ant-design-pro.css';
import NoMatchRoute from '../common/NoMatchRoute';
import HistoryQueryPanel from './HistoryQueryPanel';
import HistoryTablePanel from './HistoryTablePanel';
import HistoryDetailPanel from './HistoryDetailPanel';
import Return from '../common/Return';
export class App extends PureComponent {
    componentDidMount() {
        this.props.init();
    }
    render() {
        return (
            <div>
                <Route render={props => <Breadcrumb location={props.location} />} />
                <div className="page-main">
                    <Switch>
                        <Route path={routes.query.url()} exact render={() =>
                            <div>
                                <Card> <QueryPanel /></Card>
                                <Card> <TablePanel /></Card>
                            </div>} />
                        <Route path={routes.detail.url()} exact render={props =>
                            <Detail id={props.match.params.id} history={props.history} />} />
                        <Route path={routes.update.url()} exact render={props =>
                            <NewPanel id={props.match.params.id} history={props.history} />} />
                        <Route path={routes.add.url()} exact render={props =>
                            <NewPanel history={props.history} />} />
                        <Route path={routes.approve.url()} exact render={props =>
                            <ApprovePanel id={props.match.params.id} history={props.history} />} />
                        <Route
                            path={routes.historyQuery.url()}
                            exact
                            render={props =>
                                <React.Fragment>
                                    <div>
                                        <Card>
                                            <HistoryQueryPanel history={props.history}/>
                                        </Card>
                                        <Card>
                                            <HistoryTablePanel history={props.history}/>
                                        </Card>
                                        <div className="page-toolbar">
                                            <Return
                                                onConfirm={() => props.history.push(routes.query.url())} />
                                        </div>
                                    </div>
                                </React.Fragment>} />
                        <Route path={routes.historyDetail.url()} exact render={props =>
                            <HistoryDetailPanel id={props.match.params.id} history={props.history} />} />
                        <NoMatchRoute link={routes.query.url()} />
                    </Switch>
                </div>
            </div>
        );
    }
}

App.propTypes = {
    history: PropTypes.object,
    init: PropTypes.func,
    location: PropTypes.object,
    match: PropTypes.object,
};

import {connect} from 'react-redux';
import {getInitData} from './actions.js';
const mapDispatchToProps = dispatch => ({
    init: () => dispatch(getInitData()),
});

export default connect(null, mapDispatchToProps)(App);
